<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>sfc后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.4/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="../lib/layui-v2.5.4/layui.js"></script>
    <style>
      .layui-row div {
        padding: 10px;
        font-size: 14px;
        text-align: center;
        line-height: 20px;
      }

      .article-item {
        height: 95px;
        overflow: hidden;
      }

      .article-item div {
        height: 100px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
      }

      .content {
        text-align: left;
      }
      
      .layui-btn-group {
        width: 100%;
      }
      
      #add-btn {
        margin-top: 20px;
        margin-left: 20px !important;
        margin-bottom: 20px;
      }
      
      .layui-row {
        border-top: 1px solid #eee;
      }
    </style>
  </head>
  <body>
    <div class="layuimini-container">
      <div class="layui-btn-group">
        <button type="button" class="add-btn layui-btn" id="add-btn">增加</button>
      </div>
      <div class="layui-row">
        <div class="layui-col-md1">id</div>
        <div class="layui-col-md1">標題</div>
        <div class="layui-col-md1">類別</div>
        <div class="layui-col-md6">內容</div>
        <div class="layui-col-md1">最後修改時間</div>
        <div class="layui-col-md2">操作</div>
      </div>
      <div id="news-body"></div>
    </div>


    <script>
      window.onload = function() {

        var layer;
        layui.use('layer', function() {
          layer = layui.layer;
        });

        getArticle();

        /**
         * 查詢文章（不分類）
         */
        function getArticle() {
          $.ajax({
            url: 'http://localhost:3000/getArticleList',
            type: 'get',
            success(res) {
              let str = '';
              for (let i in res.data) {
                str +=
                  `<div class="layui-row article-item">
                    <div class="layui-col-md1">${i}</div>
                    <div class="layui-col-md1">${res.data[i].title}</div>
                    <div class="layui-col-md1">${res.data[i].category_title}</div>
                    <div class="layui-col-md6 content">${res.data[i].content.replace(/</g,'&lt;').replace(/>/g,'&gt;')}</div>
                    <div class="layui-col-md1">${formatDate(res.data[i].modify_time)}</div>
                    <div class="layui-col-md2">
                      <div class="layui-btn-group">
                        <button type="button" class="edit-btn layui-btn layui-btn-sm" data-id="${res.data[i].id}">编辑</button>
                        <button type="button" class="remove-btn layui-btn layui-btn-sm" data-id="${res.data[i].id}">删除</button>`;
                if (res.data[i].isHot) {
                  str +=
                    `<button type="button" class="unhot-btn layui-btn layui-btn-sm" data-id="${res.data[i].id}">取消推薦</button>`;
                } else {
                  str +=
                    `<button type="button" class="hot-btn layui-btn layui-btn-sm" data-id="${res.data[i].id}">添加推薦</button>`;
                }
                str += `</div>
                    </div>
                  </div>`;

              }
              $('#news-body').append(str);
            },
            fail(err) {
              layer.msg('獲取文章失敗')
            }
          });
        }

        $(document).on('click', '.add-btn', function() {
          addArticle();
        });

        $(document).on('click', '.edit-btn', function() {
          let id = $(this).data('id');
          editArticle(id);
        });

        $(document).on('click', '.remove-btn', function() {
          let id = $(this).data('id');
          removeArticle(id);
        });

        $(document).on('click', '.hot-btn', function() {
          let id = $(this).data('id');
          push2hot(id);
        });

        $(document).on('click', '.unhot-btn', function() {
          let id = $(this).data('id');
          removeHot(id);
        });

        /**
         * 格式化datatime
         */
        function formatDate(datetime) {
          let date = (datetime.split('T'))[0];
          let time = ((datetime.split('T'))[1].split('.'))[0];
          return date + '<br>' + time;
        }

        <!-- 增添文章 -->
        function addArticle() {
          layer.open({
            type: 2,
            content: './add_article.html',
            area: ['90%', '90%'],
            end() {
              location.reload();
            }
          });
        }
        <!-- 編輯文章 -->
        function editArticle(id) {
          layer.open({
            type: 2,
            content: './edit_article.html?id=' + id,
            area: ['90%', '90%'],
            end() {
              location.reload();
            }
          });
        }
        <!-- 刪除文章 -->
        function removeArticle(id) {
          $.ajax({
            url: 'http://localhost:3000/deleteArticle',
            type: 'post',
            data: {
              id: id
            },
            success(res) {
              if (res.code === 200) {
                layer.msg('刪除成功');
                setTimeout(function() {
                  location.reload();
                }, 1000);
              } else {
                layer.msg('修改失败');
              }
            },
            fail() {
              layer.msg('修改失败');
            }
          })
        }

        <!-- 添加到推薦 -->
        function push2hot(id) {
          $.ajax({
            url: 'http://localhost:3000/addHot',
            type: 'post',
            data: {
              id: id
            },
            success(res) {
              if (res.code === 200) {
                layer.msg('添加成功');
                setTimeout(function() {
                  location.reload();
                }, 1000);
              } else {
                layer.msg('添加失败');
              }
            },
            fail() {
              layer.msg('添加失败');
            }
          })
        }

        <!-- 取消推薦 -->
        function removeHot(id) {
          $.ajax({
            url: 'http://localhost:3000/removeHot',
            type: 'post',
            data: {
              id: id
            },
            success(res) {
              if (res.code === 200) {
                layer.msg('取消成功');
                setTimeout(function() {
                  location.reload();
                }, 1000);
              } else {
                layer.msg('取消失败');
              }
            },
            fail() {
              layer.msg('取消失败');
            }
          })
        }
      };
    </script>
  </body>
</html>
